<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.生命周期小试牛刀</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<h2 :style="{opacity:tmd}">欢迎迎学习Vue!</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#demo',
			data:{
				tmd:1
			},
			//mounted是Vue众多生命周期函数中的一个
			//mounted不是对象，是函数，一定不要写错
			//mounted何时调用？ —— 当vm解析完了整个模板，把最终的工作成果呈现到页面后
			mounted(){
				setInterval(()=>{
					this.tmd -= 0.01
					if(this.tmd <= 0) this.tmd =1
				},16)
			}
		})
	</script>
</html>